<template>
    <div class="degerous">
        <el-header>
            <p>车辆详情</p>
            <router-link :to="{ name: 'VehcleDetail' }">返回</router-link>
        </el-header>
        <el-main>
            <el-row type="flex" justify="space-between">
                <el-col :span="8">
                    <div class="grid-content">
                        <span>危险行为</span>
                        <el-select v-model="behavior" style="width: 120px">
                            <el-option label="左顾右盼" value="左顾右盼"></el-option>
                            <el-option label="疲劳驾驶" value="疲劳驾驶"></el-option>
                            <el-option label="接电话" value="接电话"></el-option>
                            <el-option label="抽烟" value="抽烟"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="11" class="search-bottom">
                    <div class="grid-content date-select">
                        <span>创建时间</span>
                        <el-date-picker
                        style="width: 300px"
                        v-model="creatTime"
                        type="datetimerange"
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="grid-content">
                        <el-button style="background: #4065E0; color: #ffffff">查询</el-button>
                        <el-button>重置</el-button>
                    </div>
                </el-col>
            </el-row>

            <!-- 表格部分 -->
            <div class="table-date">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    :cell-class-name="setCell"
                    border>
                    <el-table-column
                        prop="time"
                        label="发生时间"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="place"
                        label="地点"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="behavor"
                        label="危险驾驶行为">
                    </el-table-column>
                    <el-table-column
                        prop="druation"
                        label="持续时间"    
                        >
                    </el-table-column>
                </el-table>
                <div class="pageation">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        layout="prev, jumper, slot, next"
                        :page-size="pageSize"
                        :total="total"
                        >
                        <span style="text-align: center; color: #606266; font-weight: 400"> / {{ pageCount }} </span>
                    </el-pagination>
                </div>
            </div>
        </el-main>
    </div>
</template>

<script>
export default {
    name: 'DangeDetail',
    data() {
        return {
            behavior: '左顾右盼',
            creatTime: [],
            tableData: [
                { 
                time: '2019-07-29 14:35:34 ',
                place: '金沙江路',
                behavor: '疲劳驾驶',
                druation: '15S'
                }
            ],
            currentPage: 1,
            pageSize: 10,
            total: 100
        }
    },
    computed: {
        pageCount(){
            return Math.ceil(this.total / this.pageSize)
        }
    },
    methods: {
        // 设置单元格居中
        setCell({row, column, rowIndex, columnIndex}){
            return 'table-cell'
        },
        // 页码改变
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        // 当前页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style lang="scss" scoped>
.degerous{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #ffffff;
    z-index: 22;
    .el-header{
        display: flex;
        justify-content: space-between;
        height: 64px !important;
        line-height: 64px;
        p{
            font-weight: bold;
        }
        a{
            font-size: 14px;
        }
    }
    .el-main{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 64px;
        .grid-content{
            min-height: 40px;
            line-height: 40px;
            span{
                font-size: 14px;
                padding-right: 10px;
            }
        }
        .table-date{
            margin-top: 30px;
            .pageation{
                margin-top: 10px;
            }
        }
    }
}
</style>

